﻿@page "/post/{year:int:min(1900):length(4)}/{month:int:range(1,12)}/{day:int:range(1,31)}/{slug:regex(^(?!-)([a-zA-Z0-9-]){{1,128}}$)}"
@model Moonglade.Web.Pages.PostModel
@using Moonglade.Utils
@using NUglify

@Html.AntiForgeryToken()

@{
    ViewBag.BodyClass = "body-post-slug";
    if (!Model.Post.IsFeedIncluded)
    {
        HttpContext.Response.Headers.Add("X-Robots-Tag", "noindex, nofollow");
    }

    ViewBag.PostLangCode = Model.Post.ContentLanguageCode;
}

@section keywords {
    @if (Model.Post.Tags.Length > 0)
    {
        <meta name="keywords" content="@string.Join(", ", Model.Post.Tags.Select(t => t.NormalizedName))" />
    }
}

@section meta {
    @if (!Model.Post.IsFeedIncluded)
    {
        <meta name="robots" content="noindex, nofollow" />
    }

    <meta name="title" content="@Model.Post.Title" />
    <meta name="displaydate" content="@Model.Post.PubDateUtc.GetValueOrDefault().ToString("u")">
    <meta name="copyright" content="(C) @DateTime.UtcNow.Year @BlogConfig.GeneralSettings.SiteTitle">
    <meta name="author" content="@(string.IsNullOrWhiteSpace(Model.Post.Author) ? BlogConfig.GeneralSettings.OwnerName : Model.Post.Author) " />
    @if (BlogConfig.GeneralSettings.UseDublinCoreMetaData)
    {
	    <meta name="DC.Title" content="@Model.Post.Title" />
	    <meta name="DC.Publisher" content="@(string.IsNullOrWhiteSpace(Model.Post.Author) ? BlogConfig.GeneralSettings.OwnerName : Model.Post.Author)" />
	    <meta name="DC.Language" content="@Model.Post.ContentLanguageCode" />
	    <meta name="DC.Creator" content="@(string.IsNullOrWhiteSpace(Model.Post.Author) ? BlogConfig.GeneralSettings.OwnerName : Model.Post.Author)" />
	    <meta name="DC.Type" content="Text" />
	    <meta name="DC.Format" content="text/html" />
	    <meta name="DC.Format.MIME" content="text/html" />
	    <meta name="DC.Format.SysReq" content="Internet browser" />
	    @if (Model.Post.OriginLink != null)
	    {
		    <meta name="DC.Source" content="@Model.Post.OriginLink">
	    }
	    <meta name="DC.Subject" content="@string.Join(", ", Model.Post.Categories.Select(t => t.DisplayName))" />
	    <meta name="DC.Subject.Keyword" content="@string.Join(", ", Model.Post.Tags.Select(t => t.NormalizedName))" />
		@if (BlogConfig.GeneralSettings.DcLicenseUrl != null)
		{
			<meta name="DCTERMS.license"  scheme="DCTERMS.URI" content="@BlogConfig.GeneralSettings.DcLicenseUrl" />
			<meta name="DCTERMS.rightsHolder" content="@(string.IsNullOrWhiteSpace(Model.Post.Author) ? BlogConfig.GeneralSettings.OwnerName : Model.Post.Author) "/>
		}
    }
    <link href="~/css/post-slug.css" rel="stylesheet" asp-append-version="true" />
    <link href="~/css/highlighter-custom.css" rel="stylesheet" asp-append-version="true" />
    @if (BlogConfig.ContentSettings.DocumentOutline)
    {
        <link href="~/css/outline.css" rel="stylesheet" />
    }

    @if (!string.IsNullOrWhiteSpace(Model.Post.InlineCss))
    {
        var uglifiedCss = Uglify.Css(Model.Post.InlineCss);
        if (!uglifiedCss.HasErrors)
        {
            <style>
                @uglifiedCss.Code
            </style>
        }
    }
}

@section opengraph{
    <meta property="og:site_name" content="@BlogConfig.GeneralSettings.SiteTitle">
    <meta property="og:title" content="@Model.Post.Title">
    <meta property="og:type" content="article" />
    <meta property="og:description" content="@Model.Post.ContentAbstract" />
    @if (!string.IsNullOrWhiteSpace(BlogConfig.GeneralSettings.CanonicalPrefix))
    {
        <meta property="og:url" content="@(Helper.ResolveCanonicalUrl(BlogConfig.GeneralSettings.CanonicalPrefix, HttpContext.Request.Path))" />
    }
}

@section metadescription{
    <metadesc description="@Model.Post.ContentAbstract" />
}

@section scripts {
    <script src="~/js/3rd/highlight.min.js" asp-append-version="true"></script>
    <script src="~/js/3rd/qrious.min.js"></script>
    @if (BlogConfig.ContentSettings.DocumentOutline)
    {
        <script src="~/js/app/documentoutline.js"></script>
        <script>
            let outline = new DocumentOutline(
                '.post-content h1, ' +
                '.post-content h2, ' +
                '.post-content h3, ' +
                '.post-content h4, ' +
                '.post-content h5');
        </script>
    }
    <script type="module">
        import * as viewpost from '/js/app/viewpost.module.js'
        import * as utils from '/js/app/utils.module.js'

        window.viewpost = viewpost;

        viewpost.resizeImages();
        if (window.innerWidth >= 768) {
            viewpost.applyImageZooming();
        }

        viewpost.renderCodeHighlighter();
        @if (BlogConfig.AdvancedSettings.WarnExternalLink)
        {
            <text>
                viewpost.warnExtLink();
            </text>
        }

        var pid = document.querySelector('article').dataset.postid;

        window.fitImageToDevicePixelRatio = @BlogConfig.ImageSettings.FitImageToDevicePixelRatio.ToString().ToLower();

        var q = new QRious({
            element: document.querySelector('.post-qrcode'),
            value: document.URL,
            size: 200
        });

        $('#comment-form').on('submit', function (e) {
            e.preventDefault();
            viewpost.submitComment(pid);
        });

        utils.formatUtcTime();
    </script>
}

<article class="article-post-slug box border position-relative mb-4" data-postid="@Model.Post.Id" lang="@Model.Post.ContentLanguageCode">
    @if (Model.Post.Featured)
    {
        <partial name="_FeaturedTag" />
    }

    <header class="post-header @(BlogConfig.ContentSettings.PostTitleAlignment == PostTitleAlignment.Center ? "text-center" : null)">
        <h1 class="post-title">
            @Model.Post.Title
        </h1>

        <div class="post-publish-info text-muted mb-2">
            @if (Model.Post.IsOriginal)
            {
                <span class="badge bg-secondary me-2 d-none d-sm-inline">@SharedLocalizer["Original"]</span>
            }

            @if (!string.IsNullOrWhiteSpace(Model.Post.Author))
            {
                <i class="bi-person d-none d-sm-inline"></i>
                <span class="me-2 d-none d-sm-inline">@Model.Post.Author</span>
            }

            <i class="bi-calendar-event"></i>
            <span class="me-2">
                <time data-utc-label="@Model.Post.PubDateUtc.GetValueOrDefault().ToString("u")">@Model.Post.PubDateUtc</time>
            </span>
        </div>

        <hr class="d-none d-md-block" />
    </header>
    
    @if (Model.Post.IsOutdated)
    {
        <partial name="_PostOutdatedMessage" />
    }

    @if (!string.IsNullOrWhiteSpace(Model.Post.HeroImageUrl))
    {
        <div class="post-hero-image-container text-center mb-3">
            <img src="@Helper.SterilizeLink(Model.Post.HeroImageUrl)" class="post-hero-image img-fluid rounded-3 shadow-sm" />
        </div>
    }

    <section class="post-content clearfix">
        <partial name="_PostContentRender" model="Model.Post.RawPostContent" />
    </section>

    @if (BlogConfig.ContentSettings.ShowPostFooter)
    {
        <section class="post-footer clearfix">
            @Html.Raw(BlogConfig.ContentSettings.PostFooterHtmlPitch)
        </section>
    }

    <partial name="_PostActions" model="Model.Post" />

    @if (!string.IsNullOrWhiteSpace(Model.Post.OriginLink))
    {
        <a href="@Helper.SterilizeLink(Model.Post.OriginLink)" target="_blank">
            <i class="bi-link"></i>
            @SharedLocalizer["Read origin article"]
        </a>
    }
</article>
@if (BlogConfig.ContentSettings.EnableComments)
{
    switch (BlogConfig.ContentSettings.CommentProvider)
    {
        case CommentProvider.BuiltIn:
            <div class="d-print-none">
                @if (Model.Post.CommentEnabled)
                {
                    <div class="card bg-light comment-form-containter mb-4">
                            <div class="card-header">
                                <i class="bi-chat-left-text"></i>
                                @SharedLocalizer["Comments"]
                            </div>
                            <form id="comment-form">
                                <div class="card-body">
                                    <div class="row g-1 mb-2">
                                        <div class="col-md-4">
                                            <input type="text"
                                                   class="form-control"
                                                   placeholder="Your name"
                                                   id="input-comment-name"
                                                   required/>
                                        </div>
                                        <div class="col-md-8">
                                            <input type="email"
                                                   class="form-control"
                                                   placeholder="Email (Optional)"
                                                   id="input-comment-email"
                                                   data-bs-toggle="tooltip"
                                                   data-placement="top"
                                                   title="@SharedLocalizer["Providing your email address can enable blog admin to send notifications for replying your comment. Your email address will also be used to show Gravatar if it has one."]"/>
                                        </div>
                                    </div>
                                    <div class="comment-md-content mb-2">
                                        <textarea id="input-comment-content"
                                              class="form-control"
                                              cols="60"
                                              rows="4"
                                              placeholder="@SharedLocalizer["Your comments (Markdown supported)"]"
                                              maxlength="1024"
                                              required></textarea>
                                    </div>
                                    <div class="row">
                                        <div class="col-9">
                                            <div class="input-group">
                                                <img id="img-captcha" onclick="viewpost.resetCaptchaImage()" src="~/captcha-image" data-bs-toggle="tooltip" data-placement="top" title="@SharedLocalizer["Can't read? Click to change another image."]" alt="Captcha image"/>
                                                <input type="text"
                                                       id="input-comment-captcha"
                                                       class="form-control input-captcha"
                                                       placeholder="Captcha Code"
                                                       autocomplete="off"
                                                       minlength="4"
                                                       maxlength="4"
                                                       required/>
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <button id="btn-submit-comment" type="submit" class="btn btn-success float-end">
                                                <span id="loadingIndicator" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
                                                @SharedLocalizer["Submit"]
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                    </div>
                }
                else
                {
                    <div class="alert alert-warning">@SharedLocalizer["Comment of this post is disabled."]</div>
                }

                <div id="thx-for-comment" class="alert alert-warning" style="display: none;">
                    @SharedLocalizer["Thanks, your comment is pending approval now."] <br/>
                    @SharedLocalizer["It will show up once blog administrator approved your comment."]
                </div>

                <div id="thx-for-comment-non-review" class="alert alert-success" style="display: none;">
                    @SharedLocalizer["Thanks for your comment."] <br/>
                    @SharedLocalizer["Refresh the page to see your comment."]
                </div>

                <section id="comments-list">
                    @await Component.InvokeAsync("CommentList", new {postId = Model.Post.Id})
                </section>
            </div>
            break;
        case CommentProvider.ThirdParty:
            @Html.Raw(BlogConfig.ContentSettings.ThirdPartyCommentHtmlPitch)
            break;
    }
}
else
{
    <div class="alert alert-warning">@SharedLocalizer["Comment is disabled by blog administrator."]</div>
}

<partial name="_LightSwitch" />

<div class="modal fade" id="imgzoomModal" tabindex="-1" role="dialog" aria-labelledby="imgzoomModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-imgzoom" role="document" style="max-width: 100%">
        <div class="modal-content">
            <img id="imgzoom" alt="imgzoom" class="img-fluid" />
        </div>
    </div>
</div>

@if (BlogConfig.AdvancedSettings.WarnExternalLink)
{
    <partial name="_ExternalLink" />
}

<partial name="_PostForestageAdmin" />
